<template>
	<view class="container">
		<view class="hg-30"></view>
		<view class="title">
			<!-- {{ checked }} -->
			<text>上班接单</text>
			<switch :checked="flag" class="switch" color="#FFCC33"/>
			<view class="switch_shade" @tap="changeSwitch"></view>
		</view>
		<view class="hg-30"></view>
		<!-- 列表-->
		<view class="list">
			<view @click="handleOpenPage(3)">
				<view>
					<image src="/static/icon2/09.png" mode="aspectFill" ></image>
					<view>
						<view>我的零工</view>
						<text>查看我的零工</text>
					</view>
				</view>
				<image src="/static/icon1/17.png" mode="aspectFill"></image>
			</view>
			<view @click="handleOpenPage(0)">
				<view>
					<image src="/static/icon1/41.png" mode="aspectFill" ></image>
					<view>
						<view>工作期望</view>
						<text>完善个人工作期望</text>
					</view>
				</view>
				<image src="/static/icon1/17.png" mode="aspectFill"></image>
			</view>
			<view @click="handleOpenPage(1)">
				<view>
					<image src="/static/icon1/42.png" mode="aspectFill" ></image>
					<view>
						<view>邀请好友</view>
						<text>邀请好友活动现金奖励</text>
					</view>
				</view>
				<image src="/static/icon1/17.png" mode="aspectFill"></image>
			</view>
<!-- 			<view @click="handleOpenPage(2)">
				<view>
					<image src="/static/icon1/43.png" mode="aspectFill" ></image>
					<view>
						<view>任务进度</view>
						<text>完成任务获得平台奖励补贴</text>
					</view>
				</view>
				<image src="/static/icon1/17.png" mode="aspectFill"></image>
			</view> -->
			
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				// activeIndex: -1,
				disabled: false,
				flag: true,
				userInfo: { user: {}, params: {} },//当前用户信息
			}
		},
		props: {
			// 每次页面出现时，isShow变化
			isShowStaff: {
				type: Number,
				default: 0
			},
		},
		watch: {
			isShowStaff: function (newVal) {
				// console.log('isShowStaff',newVal)
				this.userInfo = uni.getStorageSync('userInfo')
				// console.log('用户状态', this.userInfo.userJobStatus)
				this.flag = this.userInfo.userJobStatus == 2 ? true : false
				// console.log('按钮', this.flag)
			}
		},
		methods: {
			// 遮罩
			async changeSwitch(){
				console.log('遮罩changeSwitch')
				if(this.flag) {
					let res1 = await this.$fetch(this.$api.upd_user_job_status, { status: 0 } , 'POST')
					if(res1.code) return uni.showToast({ title: res1.msg, icon: 'none' })
					this.flag = !this.flag
				}else {
					let res2 = await this.$fetch(this.$api.upd_user_job_status, { status: 2 } , 'POST')
					if(res2.code) return uni.showToast({ title: res2.msg, icon: 'none' })
					this.flag = !this.flag
				}
			},
			
			// 打开内页面
			handleOpenPage (page) {
				if( page == 0 ) {
					uni.navigateTo({ url: '/pages/job-expectation/job-expectation' })
				}else if ( page == 1) {
					uni.navigateTo({ url: '/pages/invite-friend/invite-friend' })
				}else if (page == 2){
					uni.navigateTo({ url: '/pages/task-progress/task-progress' })
				}else if (page == 3){
					uni.switchTab({ url: '/pages/index/index?isNewTask=1' })
				}
			},
			
		},
		
		mounted() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.flag = this.userInfo.userJobStatus == 2 ? true : false
		},
	
	}
</script>

<style lang="less">
.container {
	// border: 1px solid #000000;
	overflow: hidden;
	position: relative;
	& > .title {
		// border: 1px solid #007AFF;
		// margin: 30rpx 0;
		background-color: #FFFFFF;
		padding: 0 30rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		& > .switch_shade{
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 10;
		}
		& > .switch {
			transform: scale(0.9);
			position: absolute;
			right: 15rpx;
			// margin-left: 0px;
		}
		
		& > text {
			height: 40rpx;
			margin: 30rpx 0;
		}
	}
	& > .list {
		background-color: #FFFFFF;
		& > view {
			padding: 28rpx 30rpx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			letter-spacing: 0;
			& > view {
				// border: 1px solid #000000;
				display: flex;
				align-items: center;
				& > image {
					margin-right: 30rpx;
					width: 62rpx;
					height: 62rpx;
				}
				& > view {
					margin: 0;
					& > view {
						// border: 1px solid #000000;
						height: 40rpx;
						margin-bottom: 10rpx;
					}
					& > text {
						// border: 1px solid #000000;
						display: inline-block;
						height: 34rpx;
						font-size: 12px;
						color: rgba(64,33,16,0.50);
					}
				}
			}
			& > image {
				width: 16rpx;
				height: 26rpx;
			}
			&::after {
				content: "";
				position: absolute;
				bottom: 0rpx;
				width: 720rpx;
				height: 2rpx;
				background: #F2F2F2;
			}
		}
	}
}
</style>
